<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			table{
				border-color: #000000;
			}
		</style>
	</head>
	<body>
		<table width="50%" border="1px" cellpadding="0" cellspacing="0">
			<tr>
				
				<th>序号</th>
				<th>姓名</th>
				<th>年龄</th>
				<th>性别</th>
				<th>爱好</th>
				<th>操作</th>
			</tr>
			<tbody>
				<tr>
					<td>1</td>
					<td>kk1</td>
					<td>18</td>
					<td>男</td>
					<td>吃喝玩乐</td>
					<td><button class="up">上移</button>
			            <button onclick="deleteRow('tb',this)">删除</button>
			            <button class="down">下移</button>
					</td>
				</tr>
				<tr>
					<td>2</td>
					<td>kk2</td>
					<td>18</td>
					<td>男</td>
					<td>吃喝玩乐</td>
					<td><button class="up">上移</button>
			            <button onclick="deleteRow('tb',this)">删除</button>
			            <button class="down">下移</button>
					</td>
				</tr>
				<tr>
					<td>3</td>
					<td>kk3</td>
					<td>18</td>
					<td>男</td>
					<td>吃喝玩乐</td>
					<td><button class="up">上移</button>
			            <button onclick="deleteRow('tb',this)">删除</button>
			            <button class="down">下移</button>
					</td>
				</tr>
				<tr>
					<td>4</td>
					<td>kk4</td>
					<td>1</td>
					<td>男</td>
					<td>吃喝玩乐</td>
					<td><button class="up">上移</button>
			            <button onclick="deleteRow('tb',this)">删除</button>
			            <button class="down">下移</button>
					</td>
				</tr>
				<tr>
					<td>5</td>
					<td>kk5</td>
					<td>18</td>
					<td>男</td>
					<td>吃喝玩乐</td>
					<td><button class="up">上移</button>
			            <button onclick="deleteRow('tb',this)">删除</button>
			            <button class="down">下移</button>
					</td>
				</tr>
			</tbody>
		</table>
			<script>
//				 var dataArr = [
//			        { num: '1', name: 'kky1', age: '15', sex: '男', hobby: '学习' },
//			        { num: '2', name: 'kky2', age: '16', sex: '男', hobby: '健身' },
//			        { num: '3', name: 'kky3', age: '17', sex: '男', hobby: '代码' },
//			        { num: '4', name: 'kky4', age: '18', sex: '男', hobby: '足球' },
//			        { num: '5', name: 'kky5', age: '19', sex: '男', hobby: '篮球' }
//			    ]
//			    localStorage.dataArr = JSON.stringify(dataArr)
//			
//			
//			    window.onload = function () {
//			        render(getdataArr());
//			    }
//			    function getdataArr() {
//			        dataArr = localStorage.dataArr ? JSON.parse(localStorage.dataArr) : []
//			        return dataArr;
//			    }
//			    var tbod = document.getElementById("tbod")
//			    function render(dataArr) {
//			        tbod.innerHTML = ''
//			        for (var i = 0; i < dataArr.length; i++) {
//			            var id = dataArr[i].num
//			            tbod.innerHTML +=
//			                `
//			            <tr>
//			                <td>${dataArr[i].num}</td>
//			                <td>${dataArr[i].name}</td>
//			                <td>${dataArr[i].age}</td>
//			                <td>${dataArr[i].sex}</td>
//			                <td>${dataArr[i].hobby}</td>
//			                <td>
//			                    <button class="up">上移</button>
//			                    <button class="btn2">删除</button>
//			                    <button class="down">下移</button>
//			                </td>
//			            </tr>
//			            `;
//			        }
//			    }
			    function up(obj) {
		            var tr = obj.parentNode.parentNode;
		            var tbody = tr.parentNode;
		            var rowIdx = 0;
		            for (var i = 0; i < tbody.rows.length; i++) {
		                if (tbody.rows[i] == tr) {
		                    rowIdx = i;
		                    break;
		                }
		            }
		            if (rowIdx == 0) return alert('已经是最上一行了');
		            var preTr = tbody.rows[rowIdx - 1];
		            var nextTr = tr.nextSibling;
		            tbody.removeChild(preTr);
		            if (nextTr) tbody.insertBefore(preTr, nextTr);
		            else tbody.appendChild(preTr);
		        }
			     function down(obj) {
		            var tr = obj.parentNode.parentNode;
		            var tbody = tr.parentNode;
		            var rowIdx = 0;
		            for (var i = 0; i < tbody.rows.length; i++) {
		                if (tbody.rows[i] == tr) {
		                    rowIdx = i;
		                    break;
		                }
		            }
		            if (rowIdx == tbody.rows.length - 1) return alert('已经是最后一行了');
		            var nextTr = tbody.rows[rowIdx + 1];
		            var nextTrSibling = nextTr.nextSibling;
		            tbody.removeChild(tr);
		            if (nextTrSibling) tbody.insertBefore(tr, nextTrSibling);
		            else tbody.appendChild(tr);
		       }
		        window.onload = function() {
		            Array.from(document.querySelectorAll('.up')).forEach((el, i) => {
		                el.onclick = function() {
		                    up(this);
		                }
		            }, false);
		            Array.from(document.querySelectorAll('.down')).forEach((el, i) => {
		                el.onclick = function() {
		                    down(this);
		                }
		            }, false);
		        }
				function deleteRow(tableID, obj) {
				var rowIndex = obj.parentElement.parentElement.rowIndex;
				obj.parentElement.parentElement.parentElement.deleteRow(rowIndex); 
				}
			</script>
		</table>
	</body>
</html>
